<template>
  <view class="qr-page">
    <!-- 项目logo二维码图片 -->
    <image class="qr-img" :src="homeData.homeImage || '/static/logo.jpg'" mode="aspectFit"/>
    <!-- 提示文字 -->
    <view class="qr-tip">{{ homeData.tipText || '请用手机微信"扫一扫"扫描二维码进入龙腾狮舞AR' }}</view>
    <!-- 跳转扫码页按钮 -->
    <button class="qr-btn" @click="showTip">进入拍照识别</button>
    <!-- 全局滑动遮罩，捕获下拉手势 -->
    <view class="swipe-mask" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></view>
  </view>
</template>
<script>
import { identifyImages } from '../../api/recognition.js';

export default {
  data() {
    return {
      // 触摸相关状态
      startY: 0, // 触摸起始Y坐标
      deltaY: 0, // 滑动距离
      isSwiping: false, // 是否正在滑动
      // 首页数据
      homeData: {
        homeImage: '',
        tipText: ''
      }
    }
  },
  created() {
    // 页面加载时调用后端API获取首页数据
    this.fetchHomeData();
  },
  methods: {
    // 获取首页数据
    async fetchHomeData() {
      try {
        // 这里需要传入一个实际的图片路径来调用API
        // 在实际应用中，您可能需要调整API以支持获取首页数据而不上传图片
        // 或者使用一个默认的图片路径
        const defaultImagePath = '/static/logo.jpg';
        const result = await identifyImages(defaultImagePath);
        
        if (result.code === 200) {
          this.homeData = {
            homeImage: result.data.homeImage || '/static/logo.jpg',
            tipText: result.data.tipText || '请用手机微信"扫一扫"扫描二维码进入龙腾狮舞AR'
          };
        } else {
          console.error('获取首页数据失败:', result);
        }
      } catch (error) {
        console.error('获取首页数据时发生错误:', error);
      }
    },
    // 触摸滑动相关方法
    touchStart(e) {
      this.startY = e.touches[0].clientY
      this.deltaY = 0
      this.isSwiping = true
    },
    touchMove(e) {
      if (!this.isSwiping) return
      this.deltaY = e.touches[0].clientY - this.startY
    },
    touchEnd(e) {
      if (!this.isSwiping) return
      
      // 向下滑动（正值）可以触发刷新或其他操作
      if (this.deltaY > 50) {
        // 可以在这里添加下拉刷新逻辑
        uni.showToast({ title: '下拉刷新', icon: 'none' })
      }
      
      this.isSwiping = false
      this.startY = 0
      this.deltaY = 0
    },
    // 跳转到扫码页
    showTip() {
      console.log('按钮被点击了');
      uni.showToast({ title: '正在跳转...', icon: 'loading' });
      
      // 跳转到拍照识别页面
      uni.navigateTo({ 
        url: '/pages/scan/index',
        success: () => {
          console.log('跳转成功');
          uni.showToast({ title: '跳转成功', icon: 'success' });
        },
        fail: (err) => {
          console.error('跳转失败：', err);
          uni.showToast({ title: '跳转失败', icon: 'none' });
        }
      });
    }
  }
}
</script>
<style scoped>
/* 首页二维码页面布局 */
.qr-page { width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; }
/* logo二维码图片样式 */
.qr-img { width: 70vw; height: 70vw; margin-bottom: 40rpx; }
/* 提示文字样式 */
.qr-tip { font-size: 32rpx; color: #8b3a1c; margin-bottom: 40rpx; }
/* 跳转按钮样式 */
.qr-btn { width: 80vw; height: 88rpx; font-size: 36rpx; border-radius: 12rpx; background: #8b3a1c; color: #fff; }
/* 滑动遮罩样式 */
.swipe-mask { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 1; background: transparent; pointer-events: none; }
</style>